// scripts/main.js
document.addEventListener('DOMContentLoaded', () => {
    const sidebar = document.querySelector('.sidebar');
    const contentArea = document.getElementById('content-area');
    const userGreeting = document.getElementById('user-greeting');

    // 初始化用户状态
    const currentUser = localStorage.getItem('currentUser');
    if (currentUser) {
        userGreeting.innerHTML = `欢迎 ${JSON.parse(currentUser).username}`;
        loadProtectedContent();
    } else {
        userGreeting.innerHTML = '<a href="login.html">登录</a>';
    }

    // 侧边栏导航
    sidebar.addEventListener('click', (e) => {
        if (e.target.tagName === 'LI') {
            const page = e.target.getAttribute('data-page');
            loadPage(page);
        }
    });

    // 默认加载首页
    loadPage('home');

    function loadPage(page) {
        contentArea.innerHTML = '';
        switch(page) {
            case 'home':
                loadHomePage();
                break;
            case 'content':
                loadContentPage();
                break;
            case 'chart':
                loadChartPage();
                break;
            case 'data':
                loadDataTable();
                break;
        }
    }

    // 加载受保护内容
    function loadProtectedContent() {
        // 添加退出按钮
        userGreeting.innerHTML += ' | <a href="#" id="logout">退出</a>';
        document.getElementById('logout').addEventListener('click', logout);
    }

    function logout() {
        localStorage.removeItem('currentUser');
        window.location.reload();
    }
});

// 公共函数
function loadTemplate(templateName, data = {}) {
    const template = document.getElementById(templateName);
    const clone = template.content.cloneNode(true);
    
    // 数据绑定
    Object.keys(data).forEach(key => {
        const elements = clone.querySelectorAll(`[data-bind="${key}"]`);
        elements.forEach(el => {
            el.textContent = data[key];
        });
    });

    return clone;
    
}
document.addEventListener('DOMContentLoaded', () => {
    const contentArea = document.getElementById('content-area');
    
    // 处理页面加载
    window.loadPage = (page) => {
        const pages = {
            'home': 'pages/home.html',
            'content': 'pages/content.html',
            'chart': 'pages/chart.html',
            'data': 'pages/data.html',
            'user': 'user.html'
        };
        
        fetch(pages[page])
            .then(response => response.text())
            .then(html => {
                contentArea.innerHTML = html;
                // 初始化页面特定功能
                if (page === 'chart') {
                    initializeChart();
                }
            });
    };

    // 用户状态管理
    const user = JSON.parse(localStorage.getItem('currentUser'));
    if (user) {
        document.getElementById('user-greeting').textContent = `欢迎回来，${user.username}`;
        document.querySelector('.sidebar ul li[data-page="user"]').textContent = '个人中心';
    } else {
        document.getElementById('user-greeting').textContent = '请先登录';
    }

    // 侧边菜单交互
    document.querySelector('.sidebar ul').addEventListener('click', (e) => {
        if (e.target.tagName === 'LI') {
            const page = e.target.dataset.page;
            if (page) {
                loadPage(page);
                // 更新导航状态
                document.querySelectorAll('.sidebar ul li').forEach(li => {
                    li.classList.remove('active');
                });
                e.target.classList.add('active');
            }
        }
    });

    // 默认加载首页
    loadPage('home');
});
